<template>
    <van-nav-bar
        title="GameFramework简易游戏框架"
        :placeholder="true"
        v-show="!inGaming"
    >
        <template #left>
            <van-popover
                placement="bottom-start"
                icon-prefix="iconfont"
                v-model:show="showSettings"
                :actions="settingsItemList"
                @select="onSettingsSelect"
            >
                <template #reference>
                    <van-icon class-prefix="iconfont" name="shezhi" size="18" />
                </template>
            </van-popover>
        </template>
    </van-nav-bar>
    <game-server-list
        :gateClient="gateClient"
        @selectedserver="onSelectedServer"
        v-show="!inGaming"
    />
    <game-view
        :gateClient="gateClient"
        :gameServerInfo="currGameServerInfo"
        :inGaming="inGaming"
        @exit="onGameExit"

        :demoSimpleFrameSync="true"
    />
</template>

<script lang="ts">
import { NavBar, Popover, Icon, Toast, PopoverAction } from "vant";
import { defineComponent } from "vue";
import GameServerList from "./GameServerList.vue";
import GameView from "./GameView.vue";
import { GameServerInfo, IGameServerInfo } from "../assets/shared/gateClient/GameServer";

export default defineComponent({
    name: "App",
    components: {
        [Icon.name]: Icon,
        [NavBar.name]: NavBar,
        [Popover.name]: Popover,
        GameServerList,
        GameView,
    },
    data() {
        const gateClient = window.getGateClient("http://127.0.0.1:7100");
        var currGameServerInfo: IGameServerInfo | undefined;
        return {
            gateClient,
            showSettings: false,
            inGaming: false,
            currGameServerInfo,
            onSettingsSelect(action: PopoverAction) {
                Toast(action.text);
            },
            settingsItemList: [
                { text: "房间列表", icon: "liebiao" },
                { text: "静音", icon: "jingyin", "icon-prefix": "iconfont" },
            ],
        };
    },
    methods: {
        onSelectedServer(serverInfo: GameServerInfo) {
            this.inGaming = true;
            this.currGameServerInfo = serverInfo;
        },
        onGameExit() {
            this.inGaming = false;
        },
    },
});
</script>

<style lang="less">
html,
body {
    height: 100%;
}
#app {
    height: 100%;
}
</style>
